<template>
	<view class="app">
		<view class="banner">
			<image mode="widthFix" src="https://cdn.deletennis.com/join/83814124-67789857-46P3.png"
				style="width: 100%" />
		</view>
		<view class="banner_bg_color"></view>
		<!-- 主要内容区域 -->
		<view class="box">

			<!-- 标题区域 -->
			<view class="box1">
				<view class="box1_text">配置预览</view>
				<view class="box1_text2">
					<image mode="widthFix"
						src="https://mp-6d73be64-3f57-444c-abdf-f4c469c39f52.cdn.bspapp.com/2024/04/28/83512645-25514166-47P3.png"
						style="width: 24rpx; height: 30rpx" />
					<view @tap="reconfigure" style="margin-left: 10rpx; line-height: 8rpx">重新配置</view>
				</view>
			</view>

			<!-- 套餐信息 -->
			<view class="box2">
				<view style="display: flex">
					<image mode="widthFix" src="https://cdn.deletennis.com/join/09600639-35127134-freecompress48P3.png"
						style="width: 82rpx; height: 82rpx; border-radius: 50%" />
					<view class="box2_bos">
						<view>{{plan.name}}</view>
						<view>￥{{plan.price}}</view>
					</view>
				</view>
				<view class="box2_buttn" @tap="joinpreview">
					<text>包含配置</text>
					<image class="box13_img" mode="widthFix" src="/static/arrow-left.png" />
				</view>
			</view>

			<!-- 配置列表 -->
			<view v-for="(item, index) in configList" :key="index">
				<view class="box3">
					<view style="display: flex">
						<image mode="widthFix" :src="item.image"
							style="width: 82rpx; height: 82rpx; border-radius: 50%" />
						<view class="box3_bos">
							<view>{{ item.name }}*{{ item.num }}</view>
							<view style="font-weight: bold; font-size: 30rpx">￥{{ item.price }}</view>
						</view>
					</view>
					<view class="u-number-box">
						<text class="minus" :class="{ 'u-number-box--disabled': item.num <= 0 }"
							@tap="handleMinus(index)">-</text>
						<input type="number" v-model="item.num" class="u-number-box__input"
							@input="handleInput($event, index)" />
						<text class="plus" @tap="handlePlus(index)">+</text>
					</view>
				</view>
			</view>

			<!-- 总价 -->
			<view class="box4">
				<text>定单可享以下权益</text>
			</view>

			<!-- 说明区域 -->
			<view class="box5" style="padding: 22rpx 32rpx 32rpx">
				<view class="box5_tle">型材质保 3年/非人为损坏</view>
				<view class="box5_tle">关键设备质保 3年/非人为损坏</view>
				<view class="box5_tle">使用期限内 程序系统免费升级迭代</view>
				<view class="box5_tle">程序系统 一年免费使用权</view>
			</view>

			<!-- 确认订购 -->
			<view class="box4">
				<text>确认订购</text>
				<image mode="widthFix" src="https://cdn.deletennis.com/join3/资源 7P1.png"
					style="width: 38rpx; height: 38rpx; margin-left: 14rpx" />
			</view>

			<!-- 订购信息 -->
			<view class="box5">
				<view class="box5_tlex">
					<view class="box5_tle1">加盟人</view>
					<view>
						<input type="text" class="custom-input" v-model="username" maxlength="20" placeholder="请输入姓名"
							placeholder-style="color: #929495" @input="changusname" />
					</view>
				</view>
				<view class="box5_tlex" style="margin-top: 34rpx">
					<view class="box5_tle1">联系方式</view>
					<view>
						<input type="number" class="custom-input" v-model="mobile" maxlength="11" placeholder="请输入联系方式"
							placeholder-style="color: #929495" />
					</view>
				</view>
			</view>

			<!-- 协议同意 -->
			<view class="center3">
				<view class="custom-checkbox" @tap="toggleCheck">
					<view class="checkbox-inner" :class="{ 'is-checked': checked }">
						<text v-if="checked" class="checkbox-icon">✓</text>
					</view>
				</view>
				<view class="center3_tex">
					我已阅读并同意
					<text class="center3_texclor" @tap="agreement">⟪跃测网球加盟协议⟫</text>
				</view>
			</view>

			<!-- 底部区域 -->
			<view class="box6">
				<view class="box6_top">
					<view class="box_buttn1">
						<view style="font-size: 34rpx">加盟总价</view>
					</view>
					<view class="box_buttn1">
						<view class="box_buttn_txt2">￥{{parseFloat(plan.price) + totalPrice}}</view>
						<view class="box_buttn_txt2">锁定订单后预计 4-8 周支付</view>
					</view>
				</view>
				<view class="box6_top">
					<view class="box_buttn1">
						<view style="font-size: 40rpx">预付定金</view>
					</view>
					<view class="box_buttn1">
						<view class="box_buttn_txt1">￥2000</view>
					</view>
				</view>
				<view class="box6_bot">
					<button class="box6_bot1" @tap="saveconfiguration">保存配置</button>
					<button :class="['box6_bot2',checked ? 'box6_bot2__active' : '']" @click="toDetail">申请加盟</button>
				</view>
			</view>
		</view>
		<!-- 视频预览弹窗 -->
		<view class="popup" v-if="isShowPop">
			<!-- 遮罩层 -->
			<view class="popup-mask" @tap="closePopup" hover-stop-propagation></view>

			<!-- 弹窗内容 -->
			<view class="popup-content">
				<!-- 关闭按钮 -->
				<view class="popup-close" @tap="closePopup">
					<text class="xyicon icon-close"></text>
				</view>

				<!-- 视频播放器 -->
				<view class="popup-content-box">
					<image v-if="isShowPop" src="https://cdn.deletennis.com/join3/join1.jpg" mode="widthFix"
						style="width: 100%;" @tap="previewImageHandler" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowPop: false,
				username: '',
				mobile: '',
				checked: false,
				configList: [],
				plan: [],
				saveProduct: []
			}
		},
		onShow() {
			// 获取本地数据
			this.configList = uni.getStorageSync('selectedProducts')
			this.plan = uni.getStorageSync('selectedPlan')

			this.getUserLatestConfiguration()
		},
		computed: {
			totalPrice() {
				let total = 0;
				this.configList.forEach(item => {
					total += item.num * Number(item.price);
				});
				return total;
			}
		},
		methods: {
			previewImageHandler() {
				uni.previewImage({
					urls: ['https://cdn.deletennis.com/join3/join1.jpg'],
					current: 'https://cdn.deletennis.com/join3/join1.jpg'
				});
			},
			reconfigure() {
				this.$xyfun.back()
			},
			handleMinus(index) {
				if (this.configList[index].num > 0) {
					this.configList[index].num--
				}
			},
			handlePlus(index) {
				this.configList[index].num++
			},
			handleInput(e, index) {
				const value = parseInt(e.detail.value) || 0
				this.configList[index].num = value
			},
			//包含配置
			joinpreview() {
				this.isShowPop = true
			},
			saveconfiguration() {
				// 保存配置
				// console.log(this.username)
				// console.log(this.mobile)
				// console.log(this.configList)
				// console.log('总价:', this.totalPrice);
				// console.log(uni.getStorageSync('selectedPlan').id);
				// console.log(uni.getStorageSync('xyvenue:user').id);
				this.$api.post({
					url: '/join_configurations/createOrUpdateConfiguration',
					data: {
						user_id: uni.getStorageSync('xyvenue:user').id,
						package_id: uni.getStorageSync('selectedPlan').id,
						config_items: this.configList,
						total_price: parseFloat(this.plan.price) + this.totalPrice,
						username: this.username,
						mobile: this.mobile
					},
					success: () => {
						uni.showToast({
							title: "配置保存成功"
						})
					}
				});
			},
			toDetail() {
				const dataToStore = {
					username: this.username,
					mobile: this.mobile,
					totalPrice: parseFloat(this.plan.price) + this.totalPrice,
				};
				uni.setStorageSync('detailPageData', dataToStore);
				uni.navigateTo({
					url: '/pages/joinUs/detail'
				});
			},
			changusname(e) {
				this.username = e.detail.value
			},
			agreement() {
				// 跳转到协议页面
			},
			toggleCheck() {
				this.checked = !this.checked
			},

			closePopup() {
				this.isShowPop = false
				this.previewVideo = ''
			},
			// 获取用户已有配置
			getUserLatestConfiguration() {
				this.$api.post({
					url: '/join_configurations/getUserLatestConfiguration',
					data: {
						user_id: uni.getStorageSync('xyvenue:user').id
					},
					success: (res) => {
						this.saveProduct = JSON.parse(res.configuration.config_items).map(item => {
							return {
								...item,
								id: JSON.parse(item.id)
							}
						})
						const storedProducts = uni.getStorageSync('selectedProducts')
						let areEqual = true;

						// 检查数组长度
						if (this.saveProduct.length !== storedProducts.length) {
							areEqual = false;
						} else {
							// 比较每个元素
							for (let i = 0; i < this.saveProduct.length; i++) {
								const item1 = this.saveProduct[i];
								const item2 = storedProducts[i];
								const keys1 = Object.keys(item1);
								const keys2 = Object.keys(item2);

								// 检查属性数量
								if (keys1.length !== keys2.length) {
									areEqual = false;
									break;
								}

								// 检查每个属性
								for (let j = 0; j < keys1.length; j++) {
									const key = keys1[j];
									if (item1[key] !== item2[key]) {
										areEqual = false;
										break;
									}
								}

								if (!areEqual) {
									break;
								}
							}
						}

						if (areEqual) {
							console.log('两个数组相同');
						} else {
							console.log('两个数组不同');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #000;
	}
</style>
<style lang="scss" scoped>
	$bottomHeight: 215rpx;

	.back-btn {
		position: fixed;
		left: 16rpx;
		z-index: 100;
		width: 54rpx;
		height: 54rpx;
	}

	.back-btn image {
		width: 54rpx;
		height: 54rpx;
	}

	.app {
		height: 100vh;
		position: relative;
		padding-bottom: $bottomHeight;


		.fanhui {
			position: absolute;
			left: 14rpx;
			z-index: 100;
		}
	}

	.banner {
		width: 100%;
		height: 689rpx;
	}

	.banner_bg_color {
		background: linear-gradient(#676363, #0a0a0a);
		height: 198rpx;
		position: absolute;
		top: 484rpx;
		width: 100%;
	}


	.box {
		box-sizing: border-box;
		position: relative;
		color: #fff;
		margin-top: -14rpx;
		padding: 0 22rpx;
		width: 100%;

		.box1 {
			align-items: center;
			display: flex;
			justify-content: space-between;

			.box1_text {
				font-size: 62rpx;
				margin-left: 38rpx;
			}

			.box1_text2 {
				align-items: center;
				color: #929495;
				display: flex;
				margin-right: 38rpx;
			}
		}

		.box2 {
			align-items: center;
			border-bottom: 2px solid #929495;
			display: flex;
			justify-content: space-between;
			margin: 0 38rpx;
			padding: 66rpx 0;

			.box2_buttn {
				align-items: center;
				background-color: #fb4500;
				border-radius: 8rpx;
				color: #fff;
				display: flex;
				font-size: 28rpx;
				height: 64rpx;
				justify-content: center;
				width: 172rpx;

				.box13_img {
					height: 32rpx;
					margin-right: -8rpx;
					margin-top: 4rpx;
					transform: rotate(180deg);
					width: 32rpx;
				}
			}

			.box2_bos {
				display: flex;
				flex-direction: column;
				font-size: 26rpx;
				margin-left: 22rpx;
			}
		}

		.box3 {
			align-items: center;
			display: flex;
			justify-content: space-between;
			margin: 0 38rpx;
			padding-top: 66rpx;

			.box3_bos {
				display: flex;
				flex-direction: column;
				font-size: 26rpx;
				justify-content: space-between;
				margin-left: 22rpx;
			}
		}

		.box4 {
			align-items: center;
			border-top: 1px solid #929495;
			display: flex;
			font-size: 44rpx;
			margin: 66rpx 38rpx;
			padding-top: 66rpx;
		}

		.box5 {
			background-color: #202327;
			color: #929495;
			margin: 10rpx;
			padding: 0 32rpx 32rpx;

			.box5_text {
				font-size: 34rpx;
				padding: 44rpx 0 26rpx;
			}

			.box5_tle {
				font-size: 30rpx;
				padding-top: 16rpx;
			}

			.box5_tlex {
				align-items: center;
				display: flex;
				font-size: 32rpx;
				padding-top: 32rpx;

				.box5_tle1 {
					width: 220rpx;
				}

				.box5_tle2 {
					align-items: center;
					color: #0082ff;
					display: flex;
					margin-left: 32rpx;
				}
			}
		}

		.box6 {
			background-color: #202327;
			margin: 54rpx -22rpx 0;
			padding: 22rpx 66rpx 44rpx;

			.box6_top {
				display: flex;
				justify-content: space-between;
			}

			.box6_bot {
				display: flex;
				justify-content: space-between;
				margin-top: 44rpx;
				width: 100%;

				.box6_bot1,
				.box6_bot2 {
					align-items: center;
					border-radius: 10rpx;
					display: flex;
					height: 96rpx;
					justify-content: center;
					margin: 0;
					width: 300rpx;
				}

				.box6_bot1 {
					background-color: #202327;
					border: 1px solid #fff;
					color: #fff;
				}

				.box6_bot2 {
					background-color: #000;
					color: #717171;
				}

				.box6_bot2__active {
					background-color: #fb4500;
					color: #fff;
				}
			}

			.box_buttn1 {
				color: #fff;

				.box_buttn_txt1 {
					font-size: 40rpx;
					font-weight: 700;
				}

				.box_buttn_txt2 {
					color: #949392;
					font-size: 26rpx;
					margin-top: 10rpx;
				}

				.box_buttn_txt3 {
					font-size: 30rpx;
					margin-left: 22rpx;
					text-decoration-line: line-through;
				}
			}
		}
	}

	// 数字输入框样式
	.u-number-box {
		display: flex;
		align-items: center;

		.minus,
		.plus {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			line-height: 22rpx;
			color: #fff;
			border-radius: 50%;
			border: 1rpx solid #fff;
			background-color: #000;
		}

		&__input {
			width: 40rpx;
			height: 26rpx;
			margin: 0 4rpx;
			padding: 0;
			font-size: 28rpx;
			line-height: 28rpx;
			text-align: center;
			color: #fff;
			background-color: #000;
		}
	}

	// 协议区域样式
	.center3 {
		align-items: center;
		color: #fff;
		display: flex;
		margin-left: 10rpx;
		margin-top: 76rpx;

		.center3_tex {
			font-size: 30rpx;
		}

		.center3_texclor {
			color: #0082ff;
			margin-left: 10rpx;
		}
	}

	// 自定义输入框样式
	.custom-input {
		width: 400rpx;
		height: 60rpx;
		background-color: transparent;
		border: none;
		font-size: 28rpx;
		color: #929495;
	}

	// 自定义复选框样式
	.custom-checkbox {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;

		.checkbox-inner {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			&.is-checked {
				background-color: #2979ff;
				border-color: #2979ff;
				border-radius: 50%;
				color: #fff;
			}
		}

		.checkbox-icon {
			color: #fff;
			font-size: 24rpx;
		}
	}

	// 弹窗样式
	.popup {
		.popup-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 10073;
			transition: all 0.25s ease-in-out;
		}

		.popup-content {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 692rpx;
			background: #fff;
			border-radius: 9rpx;
			overflow: hidden;
			z-index: 10075;
			animation: zoom-in 0.25s ease-in-out;

			.popup-close {
				position: absolute;
				top: 18rpx;
				right: 18rpx;
				width: 36rpx;
				height: 36rpx;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #909399;
			}

			.popup-content-box {
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				padding: 68rpx 24rpx 24rpx;
				display: flex;
				justify-content: center;

				.video-player {
					width: 638rpx;
					height: 577rpx;
					object-fit: contain;
				}
			}
		}
	}

	@keyframes zoom-in {
		from {
			transform: translate(-50%, -50%) scale(0);
			opacity: 0;
		}

		to {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}
	}
</style>